import React, {Component, Fragment} from 'react'
import {Row, Col, Divider, Button, Icon, Progress, Tabs} from 'antd'
import {Link} from 'react-router-dom'
import '../style/index.scss'
import Helper  from '../helper/index'
import works  from '../image/works.jpg'
import works1  from '../image/works1.jpg'
import works2  from '../image/works2.jpg'
import works3  from '../image/works3.jpg'
import works4  from '../image/works4.jpg'
import works5  from '../image/works5.jpg'
import works6  from '../image/works6.jpg'
import works7  from '../image/works7.jpg'
import works8  from '../image/works8.jpg'
import works9  from '../image/works9.jpg'
import works10  from '../image/works10.jpg'
import works11  from '../image/works11.jpg'

const { TabPane } = Tabs;

const {showHtml} = new Helper()

class ResRig extends Component {
    constructor(props){
        super(props)
        this.state={
            tabs:{
                tabPosition:"top",
                tabTit:["响应式", "PC端", "移动端"]
            },
            caseDec:"web前端开发历年案例展示",
            casesMedia0:[
                {
                    imgUrl:works,
                    title:"智慧农场",
                    post:"Web development",
                    link:"http://onefarm.doone.com.cn/search/"
                },
                {
                    imgUrl:works1,
                    title:"易佰店",
                    post:"Web development",
                    link:"http://www.100estore.com/"
                },
                {
                    imgUrl:works2,
                    title:"诚信签",
                    post:"Web development",
                    link:"http://xinren.itrusign.com/#!/login"
                },
                {
                    imgUrl:works3,
                    title:"蒲江大数据",
                    post:"Web development",
                    link:"http://pjnydsjpt.com/"
                }
            ],
            casesMedia1:[
                {
                    imgUrl:works4,
                    title:"茶叶信息网",
                    post:"Web development",
                    link:"http://www.dwchaye.com/"
                },
                {
                    imgUrl:works5,
                    title:"农业信息服务",
                    post:"Web development",
                    link:"http://114.116.154.42/dist/login.html"
                },
                {
                    imgUrl:works6,
                    title:"打印派",
                    post:"Web development",
                    link:"http://www.dayinpai.com/"
                },
                {
                    imgUrl:works7,
                    title:"土地流转服务",
                    post:"Web development",
                    link:"http://27.150.172.131:7019/lands/#/index"
                }
            ],
            casesMedia2:[
                {
                    imgUrl:works8,
                    title:"农业智慧展厅",
                    post:"Web development",
                    link:"http://114.116.154.42/dist"
                },
                {
                    imgUrl:works9,
                    title:"湖北科技金融",
                    post:"Web development",
                    link:"http://www.hbkjjr.org.cn/"
                },
                {
                    imgUrl:works10,
                    title:"农业追溯平台",
                    post:"Web development",
                    link:"http://zs.nw.wuhan.gov.cn/"
                },
                {
                    imgUrl:works11,
                    title:"纵横天下",
                    post:"Web development",
                    link:"http://cspet.witvid.com/"
                }
            ],
            resume:{
                dec:`<p>我是王家宇，毕业于江汉大学</p>
                    <p>技术多⾯，从运维实施到后端开发再到前端开发及设计，现在的技术重点专注于前端开发。专注js，具备java基础，python基础，了解go，懂linux，会sql。</p>`,
                btns:[
                    {
                        ico:'qq',
                        txt:'1587932054'
                    },
                    {
                        ico:'mobile',
                        txt:'18171235389'
                    },
                    {
                        ico:'mail',
                        txt:'Sonic25257758@163.com'
                    }
                ],
                Education:[
                    {
                        University:"江汉大学",
                        diploma:"本科",
                        year:"2007 - 2011",
                        major:"机械与建筑工程学院 | 光机电一体化工程"
                    }
                ],
                work:[
                    {
                        logoEnt:this.props.logo,
                        company:"新东网科技",
                        scale:"300-500人",
                        post:"WEB前端工程师",
                        year:"2017.10 - 至今",
                        dec:`<p>1.项⽬管理，编制开发计划，协调开发⼈员。</p>
                            <p>2.前端开发:</p>
                            <p>（1）熟练使⽤Element-UI、ant-design、vant等UI框架搭建前端页⾯</p>
                            <p>（2）使⽤echarts、antV进⾏数据可视化开发</p>
                            <p>（3）使⽤百度/⾕歌地图以及leaflet、openlayer开发地图应⽤⽤于农业⽥地</p>
                            <p>（4）根据项⽬功能需求，采⽤mvvm模式的ng2、vue、react进⾏spa单页应⽤开发</p>
                            <p>（5）将spa单页应⽤采⽤（nuxt，next）后端渲染框架</p>
                            <p>（6）基于Nodejs的eggjs后端框架开发后台服务端应⽤</p>`
                    },
                    {
                        logoEnt:"https://img.xiaoqiqiao.com/upload/3854083/common/1511502710c3854083.jpg",
                        company:"天威诚信",
                        scale:"200-300人",
                        post:"WEB前端工程师",
                        year:"2015.11 - 2017.9",
                        dec:`<p>1.负责项⽬前端设计与⼯程构建，并开发部分功能模块；</p>
                        <p>2. 管理项⽬开发⼩组⽇常及制定开发计划；</p>
                        <p>3. 前端开发:</p>
                        <p>（1）使⽤echarts进⾏数据可视化开发</p>
                        <p>（2）使⽤bootstrap，jqUI等UI框架</p>
                        <p>（3）根据项⽬功能需求，采⽤angularjs、backbone进⾏spa单页应⽤开发</p>
                        <p>（4）熟练使⽤nodejs及npm等babel、gulp、webpack等构建⼯具</p>
                        <p>（5）掌握CommonJS、AMD、ES6等模块加载规范</p>
                        <p>4. 运维实施：</p>
                        <p>（1）熟练使⽤ubuntu，centos等主流的linux发⾏版服务器系统使⽤</p>
                        <p>（2）了解shell脚本使⽤</p>
                        <p>（3）掌握docker容器的基本⽤法</p>`
                    },
                    {
                        logoEnt:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1146301174,2017174936&fm=26&gp=0.jpg",
                        company:"捷讯技术",
                        scale:"100-150人",
                        post:"WEB前端工程师",
                        year:"2013.12 - 2015.4",
                        dec:`<p>1. 参与系统集成项⽬的前端开发⼯作</p>
                        <p>2. 协助项⽬经理完成产品需求分析及产品设计规划</p>
                        <p>3. 前端开发:</p>
                        <p>（1）使⽤bootstrap，eazyui等UI框架进⾏页⾯开发</p>
                        <p>（2）运⽤jq开发定制交互效果</p>`
                    }
                ],
                Skill:{
                    dec:`
                        <p>1. 熟练使用webStrom、Vs code等软件，掌握网站交互以及HTML页面代码优化等技术</p>
                        <p>2. 熟练使用HTML(5)+CSS(3)进行PC端及移动端进行排版布局</p>
                        <p>3. 熟练使用Angular、Vue、React等mvvm开发web应用及后端渲染开发框架（nuxt/next）</p>
                        <p>4. 熟练使用mpvue、uniapp/taro多端框架使用web技术开发小程序及多端应用</p>
                        <p>5. 熟练使用bootStrap、Element-UI、ant-design等UI框架</p>
                        <p>6. 熟练使用babel、gulp、webpack等构建工具</p>
                        <p>7. 掌握Less、Sass等预处理css</p>
                        <p>8. 掌握Nodejs等服务端js开发框架，Express、Koa、Eggjs</p>
                        <p>9. 掌握CommonJS、AMD、ES6等模块加载规范</p>
                        <p>10. 了解JAVA、Python、Go等服务端语言</p>
                        <p>11.精通linux及相关运维部署及容器（Tomcat、Jboss），docker</p>
                        <p>12.掌握echarts等数据可视化库。</p>
                        <p>13.掌握使用openlayers、leaflet以及百度、谷歌地图进行地图开发</p>`,
                    tech:[
                        {
                            name:"Html",
                            percent:80
                        },
                        {
                            name:"CSS",
                            percent:80
                        },
                        {
                            name:"Javascript",
                            percent:85
                        },
                        {
                            name:"Python",
                            percent:60
                        },
                        {
                            name:"Java",
                            percent:65
                        },
                        {
                            name:"Go",
                            percent:45
                        },
                        {
                            name:"Nodejs",
                            percent:75
                        },
                        {
                            name:"Webpack",
                            percent:60
                        },
                        {
                            name:"Angular",
                            percent:85
                        },
                        {
                            name:"Vue",
                            percent:80
                        },
                        {
                            name:"React",
                            percent:75
                        },
                        {
                            name:"jquery",
                            percent:75
                        }
                    ]
                },
                expected:{
                    post:"WEB前端",
                    type:"全职",
                    location:"武汉",
                    salary:"20k"
                }
            }
        }
    }

    handleCases(list){
        return list.map((item, index)=>{
            return (
                <Col xs={{span:24}} md={{span:6}} key={index}>
                    <div className="box">
                        <img src={item.imgUrl} style={{maxWidth:'100%'}} alt={item.title} />
                        <div className="box-content">
                            <h3 className="title">{item.title}</h3>
                            <span className="post">{item.post}</span>
                            <ul className="icon">
                                <li><Link to="/"><i className="fa fa-search"></i></Link></li>
                                <li><a href={item.link} target="_blank" rel="noopener noreferrer"><i className="fa fa-link"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </Col>
            )
        })
    }

    render(){
        return (
            <Fragment>
                <div className="right-set">
                    <Row><h1>&nbsp;</h1></Row>
                    <Row type={'flex'} justify={'center'}>
                        <Col xs={{span:20}} md={{span:20}}>
                            <Row><h1><Icon type="block" />&nbsp;关于我</h1></Row>
                            
                            <Row gutter={[16, 16]}>
                                {showHtml(this.state.resume.dec)}
                                {this.state.resume.btns.map((item, index)=>{
                                    return (
                                    <Col xs={{span:24}} md={{span:7}} key={index} >
                                        <Button type="primary" className='btn-set' icon={item.ico} size={'large'} block>{item.txt}</Button>
                                    </Col>
                                    )
                                })}    
                            </Row>
                            <Divider></Divider>
                            <Row><h1><Icon type="block" />&nbsp;教育经历</h1></Row>
                            <Row>
                                {this.state.resume.Education.map((item, index)=>{
                                    return (
                                        <div key={index}>
                                            <h2>{item.University}({item.diploma}) {item.year}</h2>
                                            <div>专业课程：{item.major}</div>
                                        </div>
                                    )
                                })}
                            </Row>
                            <Divider></Divider>
                            <Row><h1><Icon type="block" />&nbsp;工作经历</h1></Row>
                            {this.state.resume.work.map((item, index)=>{
                                return (
                                    <Row gutter={[16, 16]} key={index}>
                                        <Col xs={{span:8}} xxl={{span:4}} xl={{span:6}}>
                                            <img src={item.logoEnt} alt='entLogo'  className='ComLogo'/>
                                        </Col>
                                        <Col xs={{span:16}} xxl={{span:20}} xl={{span:18}} >
                                            <h3>{item.company}<small>({item.scale})</small></h3>
                                            <div>{item.major}({item.year})</div>
                                            {showHtml(item.dec)}
                                        </Col>
                                    </Row>
                                )
                            })}
                            <Divider></Divider>
                            <Row><h1><Icon type="block" />&nbsp;我的技能</h1></Row>
                            <Row><div>{showHtml(this.state.resume.Skill.dec)}</div></Row>
                            <Row gutter={[16, 16]}>
                                {this.state.resume.Skill.tech.map((item, index)=>{
                                    return (
                                    <Col key={index} xs={{span:0}} md={{span:6}} style={{textAlign:'center'}} ><Progress strokeColor={{'0%': '#108ee9','100%': '#87d068' }} type="dashboard" percent={item.percent} /> <br/> {item.name}</Col>
                                    )
                                })}
                            </Row>
                            <Row>
                                {this.state.resume.Skill.tech.map((item, index)=>{
                                    return (
                                    <Col key={index} xs={{span:24}} md={{span:0}} xl={{span:0}} style={{textAlign:'center'}} ><Progress strokeColor={{'0%': '#108ee9','100%': '#87d068' }} type="line" status="active" percent={item.percent} /> <br/> {item.name}</Col>
                                    )
                                })}
                            </Row>
                            <Divider></Divider>
                            <Row><h1><Icon type="block" />&nbsp;作品/案例</h1></Row>
                            <Row><div>{this.state.caseDec}</div></Row>
                            <Row>
                                <Tabs tabPosition={this.state.tabs.tabPosition}>
                                    <TabPane tab={this.state.tabs.tabTit[0]} key={"0"}>
                                        <Row>
                                            {this.handleCases(this.state.casesMedia0)}
                                        </Row>
                                    </TabPane>
                                    <TabPane tab={this.state.tabs.tabTit[1]} key={"1"}>
                                        <Row>
                                            {this.handleCases(this.state.casesMedia1)}
                                        </Row>
                                    </TabPane>
                                    <TabPane tab={this.state.tabs.tabTit[2]} key={"2"}>
                                        <Row>
                                            {this.handleCases(this.state.casesMedia2)}
                                        </Row>
                                    </TabPane>
                                </Tabs>
                            </Row>
                            <Divider></Divider>
                            <Row><h1><Icon type="block" />&nbsp;期望工作</h1></Row>
                            <Row gutter={[16, 16]}>
                                <Col xs={{span:12}} md={{span:4}} xxl={{span:3}}><Icon type="html5" />&nbsp;{this.state.resume.expected.post}</Col>
                                <Col xs={{span:12}} md={{span:4}} xxl={{span:3}}><Icon type="clock-circle" />&nbsp;{this.state.resume.expected.type}</Col>
                                <Col xs={{span:12}} md={{span:4}} xxl={{span:3}}><Icon type="environment" />&nbsp;{this.state.resume.expected.location}</Col>
                                <Col xs={{span:12}} md={{span:4}} xxl={{span:3}}><Icon type="dollar" />&nbsp;{this.state.resume.expected.salary}</Col>
                            </Row>
                            <Divider></Divider>
                        </Col>
                    </Row>
                </div>
            </Fragment>
        )
    }
}

export default ResRig